<template>
  <!-- 我的页面 -->
  <div class="container">
    <ul class="aside">
      <li
        v-for="(item,index) in tabArr"
        :key="index"
        :class="[cut === index ? 'active' : '']"
        @click="changeTab(index)"
      >{{item}}</li>
    </ul>
    <div class="main">
      <Personal v-if="cut === 0" @getRights="getRights"></Personal>
      <MyWall v-else-if="cut === 1 || cut === 2" :cut="cut"></MyWall>
      <Attention v-else-if="cut === 3" @backcut="backcut"></Attention>
      <div class="content" v-else>暂未开放,还请见谅</div>
    </div>
  </div>
</template>

<script>
// 引入子组件
import Personal from "@/views/mine/personal/index.vue";
import MyWall from "@/views/mine/myWall/index.vue";
import Attention from "@/views/mine/attention/index.vue";
export default {
  data() {
    return {
      // 标签数组
      tabArr: ["个人中心", "我的发布", "我的喜欢", "我的关系", "我的留言"],
      cut: 0, //控制显示的值
      rights: false,
    };
  },
  methods: {
    // 切换的回调
    changeTab(key) {
      // 判断你是否是点击我的标签进入此页面
      let isMine = this.$route.params.isMine;
      if (isMine) {
        this.cut = key * 1;
      } else {
        // 说明是阅读者模式 判断用户权限等级
        if (this.rights * 1 === 2) {
          if (key * 1 > 2) return this.$message("用户设置了权限无法查看");
        } else if (this.rights * 1 === 3) {
          console.log(this.rights, "二次判断");
          if (key * 1 === 1 || key * 1 === 2)
            return this.$message("用户设置了权限无法查看");
        } else if (this.rights * 1 === 4) {
          if (key * 1 !== 0) return this.$message("用户设置了权限无法查看");
        }
        this.cut = key * 1;
      }
    },
    // 接收子组件传入的等级
    getRights(rights) {
      this.rights = rights; //赋值
    },
    // 接收我的关系子组件的回调
    backcut() {
      // 回到第一个模块
      this.cut = 0;
    },
  },
  components: {
    Personal,
    MyWall,
    Attention,
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  border-radius: 5px;
  width: 1000px;
  margin: 10px auto;
  display: flex;
  min-height: 600px;
  position: relative;
  .aside {
    position: fixed;
  }
  ul {
    max-width: 150px;
    min-width: 100px;
    padding: 5px 5px;
    li {
      font-weight: 700;
      color: rgb(145, 145, 145);
      padding: 5px 10px;
      height: 30px;
      line-height: 30px;
      text-align: right;
      border-right: 4px solid #ccc;
      cursor: pointer;
    }
    .active {
      color: #008c8c;
      border-right: 4px solid #008c8c;
    }
    li:hover {
      color: #008c8c;
    }
  }
  .main {
    position: relative;
    left: 115px;
    width: 100%;
    padding: 10px 10px;
  }
}
</style>